<template>
  <div class="column q-pa-sm cc-select-date-time bg-white" >
    <div class="col" v-if="local.type!=='time'">
      <q-date
        v-model="date"
        minimal
        mask="YYYY-MM-DD"
        style="box-shadow: none;"
        @input="selectDate"
        :options="checkOptions"
      />
    </div>
    <div class="row no-wrap q-pt-sm" v-if="local.type!=='date'">
      <q-input v-model="time" class="col" outlined dense style="width:150px;">
        <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
          <select-time :local.sync="local"  @calcText="calcText"/>
        </q-popup-proxy>
        <template v-slot:append>
          <q-icon name="schedule" />
        </template>
      </q-input>
      <q-space />
      <q-btn color="primary" class="q-mr-sm" flat label="此刻" @click="setNow" />
      <q-btn label="确定" @click="closeProxy" />
    </div>
  </div>
</template>

<script>
import { date } from 'quasar';
import { replaceAll } from 'boot/util';
import { requiredTest } from 'boot/inputTest';
import SelectTime from './selecttime';

export default {
  components: {
    SelectTime,
  },
  props: {
    local: {
      type: Object,
      required: true,
    },
    form: {
      type: Object,
      required: false,
    },
    beginDate: {
      type: String,
      required: false,
    },
    endDate: {
      type: String,
      required: false,
    },
    options: {
      type: Function,
      required: false,
      default: () => () => true,
    },
  },
  data() {
    return {
      date: '',
      time: '',
      dateTime: '',
    };
  },
  watch: {
  },
  computed: {},
  methods: {
    requiredTest,
    checkOptions(d) {
      const cur = replaceAll(d, '/', '-');
      if (!this.form) {
        return true;
      }
      if (!this.beginDate && !this.endDate) {
        return this.options(d);
      }
      if (this.beginDate && this.endDate) {
        return cur >= this.endDate && cur <= this.beginDate;
      }
      if (this.beginDate && this.form[this.beginDate]) {
        return cur >= this.form[this.beginDate];
      }
      if (this.endDate && this.form[this.endDate]) {
        return cur <= this.form[this.endDate];
      }
      return true;
    },
    fillZero(num) {
      return num > 9 ? num : `0${num}`;
    },
    closeProxy() {
      this.calcText();
      this.$emit('closeSelect');
    },
    setNow() {
      this.input();
    },
    selectDate(v) {
      if (!this.date || this.date.length !== 10) {
        this.date = this.local.date;
      }
      const [year, month, day] = this.date.split('-');
      this.local.year = parseInt(year, 10);
      this.local.month = parseInt(month, 10);
      this.local.day = parseInt(day, 10);
      this.$emit('calcText');
      if (this.local.type === 'date') {
        this.$emit('closeSelect');
      }
    },
    calcText() {
      this.time = `${this.local.hour}:${this.local.minute}:${this.local.second}`;
      this.$emit('calcText');
    },
    selectTime() {
      if (!this.time || this.time.length !== 8) {
        this.time = this.local.time;
      }
      const [hour, minute, second] = this.time.split(':');
      this.local.hour = parseInt(hour, 10);
      this.local.minute = parseInt(minute, 10);
      this.local.second = parseInt(second, 10);
      this.$emit('calcText');
    },
    input(d, t) {
      this.date = d || date.formatDate(Date.now(), 'YYYY-MM-DD');
      this.time = t || date.formatDate(Date.now(), 'HH:mm:ss');
      this.selectDate();
      this.selectTime();
    },
  },
  created() { },
  mounted() {
    this.date = this.local.date;
    this.time = this.local.time;
    this.dateTime = this.local.dateTime;
  },
};
</script>
<style lang="stylus">
.cc-select-date-time
  width 290
  height 310
.q-date__view
  padding 8px 8px
  min-height 270px
</style>
